<script>
	export default {
		onLaunch: function() {
			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';
	// 设置整个项目的背景色
	body {
		background-color:#003e7b;
	}
	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
	
	@keyframes opacityChange {
	    50% {
	        opacity:.5;
	    }
	    100% {
	        opacity: 1;
	    }
	}
	@keyframes rotate {
		100% {
			transform: rotate(1turn);
		}
	}
	.item {
	    
	    padding: 0rpx;
		 width: 100%;
		
	    .bor{ 
			opacity: 0.7;
	        --borderWidth: 12px;
	        --bRadius: 10px;
	        width: 100%;
			height: 750rpx;
	        position: relative;
	        z-index: 0;
	        overflow: hidden;

	        z-index: 0;
	        border-radius: --bRadius;
	        &::after, &::before {
	            box-sizing: border-box;
	        }
	        &::before {
	            content: '';
	            position: absolute;
	            z-index: -2;
	            left: -50%;
	            top: -50%;
	            width: 200%;
	            height: 200%;
	            background-color: #002f2f;
	            background-repeat: no-repeat;
	            background-position: 0 0;
	            background-image: conic-gradient(transparent, rgba(000, 239, 255, 1), transparent 30%);
	            animation: rotate 4s linear infinite;
	        }
		
	        &::after {
	            content: '';
	            position: absolute;
	            z-index: -1;
	            left: calc(var(--borderWidth) / 2);
	            top: calc(var(--borderWidth) / 2);
	            width: calc(100% - var(--borderWidth));
	            height: calc(100% - var(--borderWidth));
	            background: linear-gradient(to right, #0095ff,#00154a);;
	            border-radius: 5px;
				
	            /* 这句效果打开有助于理解动画 */
	            /*animation: opacityChange 5s infinite linear;*/
	        }
	        
	    }
	}
	
	.item:nth-child(9) .bor::after {
	    animation: opacityChange 5s infinite linear;
	}



	.css3-1 {
	    --bRadius: 10px;
	    
	        position: relative;
	        text-align: center;
	        border: 3rpx solid rgb(179, 191, 231);
	        border-radius: var(--bRadius);
	        transition: all .3s;
	        background-color: #eee;
	        &::before, &::after {
	            content: "";
	            position: absolute;
	            top: -10rpx;
	            left: -10rpx;
	            right: -10rpx;
	            bottom: -10rpx;
	            border: 5rpx solid rgb(100, 36, 10);
	            transition: all .5s;
	            border-radius: var(--bRadius);
	            animation: clippath 3s infinite linear;
	        }
	        &::after {
	            animation: clippath 3s infinite -1.5s linear;
	        }
	        @keyframes clippath {
	            0%, 100% { clip-path: inset(0 0 98% 0); }
	            25% { clip-path: inset(0 98% 0 0); }
	            50% { clip-path: inset(98% 0 0 0); }
	            75% { clip-path: inset(0 0 0 98%); }
	        }
	
	    
	}

</style>
